import React, {Component} from 'react';
import {Col, Row, Spin} from 'antd';
import '../css/register.css';
import {Back} from '../components/EditComponent';
import ss from '../image/qrcode.png';
import during from '../image/during.png';
import finish from '../image/finish.png';
import map from '../image/map.png';
import {Redirect} from 'react-router-dom';
import {config} from "../config";
import {order} from "../value";
import app from '../AppMethod';
import ReactPullLoad,{STATS} from 'react-pullload';
import '../../node_modules/react-pullload/dist/ReactPullLoad.css';

//import map from '../image/map.png';

class DeliveryOrder extends Component {
    constructor(props) {
        super(props);
        this.state = {
            data: [],
            redirect: false,
            loading: false,
            hasMore:true,
            action:STATS.init,
            index:0,
            employee_id:'',
            page:0,
            size:4
        }
    };

    render() {
        const {hasMore}=this.state;
        if (this.state.redirect) {
            return <Redirect push to="/deliveryOrderDetail"/>; //or <Redirect push to="/sample?a=xxx&b=yyy" /> 传递更多参数
        }
        return (
            <div className="orderListContainer">
                <div style={{position:'fixed',width:'100%',height:'44px',top:0,left:0,zIndex:4}}>
                    <Back title="已配送订单" back="true" click={()=>this.handleBack()}/>
                </div>
                <Spin spinning={this.state.loading}>
                    {
                        this.state.data.length>0?
                            <ReactPullLoad
                                action={this.state.action}
                                handleAction={this.handleAction}
                                hasMore={hasMore}
                                distanceBottom={1000}
                                style={{marginTop:44,paddingBottom:80}}
                            >
                                <div className="orderListContent">
                                    {
                                        this.state.data.length > 0 ?
                                            this.state.data.map((item, index) => {
                                                return (
                                                    <OrderItem data={item} key={index} click={(path) => this.handleDropMap(path)}/>
                                                )
                                            }) : ''
                                    }
                                </div>
                            </ReactPullLoad>:''
                    }
                    {
                        this.state.data.length<=0?<div style={{textAlign: 'center', marginTop: '80px'}}>暂无数据</div>:''
                    }
                </Spin>
                <div className="bottomContainer" style={{position: 'fixed', bottom: 0}}>
                    <div className="bottomLogo" onClick={() => this.handleDropMap('/addOrder')}>
                        <div>
                            <img alt="null" src={ss} style={{width: '24px', height: '24px'}}/>
                        </div>
                        <div className="bottomLogoTitle">扫一扫</div>
                    </div>
                    <div className="bottomLogo" onClick={() => this.handleDropMap('/navigation/1')}>
                        <div>
                            <img alt="null" src={map} style={{width: '24px', height: '24px'}}/>
                        </div>
                        <div className="bottomLogoTitle">查看地图</div>
                    </div>
                    <div className="bottomLogo" onClick={() => this.handleDropMap('/deliveryOrder')}>
                        <div>
                            <img alt="null" src={during} style={{width: '24px', height: '24px'}}/>
                        </div>
                        <div className="bottomLogoTitle">配送中</div>
                    </div>
                    <div className="bottomLogo">
                        <div>
                            <img alt="null" src={finish} style={{width: '24px', height: '24px'}}/>
                        </div>
                        <div className="bottomLogoTitle LogoTitleChoose">已配送</div>
                    </div>
                </div>
            </div>
        )
    };
    async componentDidMount() {
        let data={
            page:1
        };
        let orderData=await this.handleGetOrderList(data,1);
        this.setState({data:orderData});
    };

    /**
     * 根据负责人id查询订单列表
     * @returns {Promise.<void>}
     */
    async handleGetOrderList(data,type) {
        if(data.page===1&&type===1){
            this.setState({loading: true});
        }
        let employee_id = app.getData('employee_id');
        data.size=this.state.size;
        data.employee_id=employee_id;
        let result = await app.post(order.QUERY_FINISHOUTPUT, data);
        if (result.code === 1) {
            let count = result.data.count;
            let allPage;
            if (count % this.state.size > 0) {
                allPage = parseInt(count / this.state.size) + 1;
            } else {
                allPage = count / this.state.size;
            }
            let data = result.data.dataSet;
            let hasMore=false;
            if(allPage>1){
                hasMore=true;
            }
            this.setState({loading: false, page: data.page, index: allPage,hasMore});
            return data;
        } else {
            this.setState({loading: false});
            return [];
        }
    };

    /**
     * 判断组件行为状态
     * @param action
     */
    handleAction=(action)=>{
        console.log(action,this.state.action,action===this.state.action);
        if(action===this.state.action){
            return false;
        }
        if(action===STATS.refreshing){//刷新
            this.handleRefreshing();//调用刷新事件
        }else if(action===STATS.loading){//加载更多
            this.handleLoadMore();//调用加载更多事件
        }else{
            this.setState({action:action});
        }
    };

    /**
     * 处理下拉刷新事件
     * @returns {boolean}
     */
    handleRefreshing=async()=>{
        if(STATS.refreshing===this.state.action){
            return false;
        }
        let data={
            page:1
        };
        let orderData=await this.handleGetOrderList(data,2);
        let index=this.state.index;
        setTimeout(()=>{
            //完成刷新
            this.setState({
                data:orderData,
                hasMore:index>1?true:false,
                action:STATS.refreshed,
            })
        },2000);

        this.setState({
            action:STATS.refreshing
        })
    };

    /**
     * 处理上拉加载更多事件
     * @returns {boolean}
     */
    handleLoadMore=async()=>{
        if(STATS.loading===this.state.action){
            return false;
        }
        if(!this.state.hasMore){
            return false;
        }
        let data={
            page:this.state.page+1,
        };
        let orderData=await this.handleGetOrderList(data,2);
        setTimeout(()=>{
            if(this.state.index===0){
                this.setState({
                    action:STATS.reset,
                    hasMore:false
                });
            }else{
                this.setState({
                    data:[...this.state.data,...orderData],
                    action:STATS.reset,
                    index:this.state.index-this.state.page
                })
            }
        },2000);
        this.setState({action:STATS.loading})
    };

    /**
     * 处理页面跳转事件
     * @param path
     */
    handleDropMap(path) {
        this.props.history.push(config.path + path);
    };

    /**
     * 处理页面返回事件
     */
    handleBack(){
        this.props.history.push(config.path + '/operation');
    }
}

class OrderItem extends Component {
    constructor(props) {
        super(props);
        this.state = {}
    }

    render() {
        let {output_num, output_follow_name, output_follow_phone, customer_x, customer_y,
            customer_name,output_logistics_type,output_stop_position,output_customer_car
            ,logistics_name,logistics_phone,logistics_x,logistics_y} = this.props.data;
        let type = output_logistics_type;
        return (
            <Row className="allDeliveryContainer">
                <Row className="orderItem">
                    <Col className="orderItemNumber" xs={24} md={8} lg={6}>订单号：{output_num}</Col>
                    <Col className="orderPerson" xs={10} md={8} lg={6}>跟单人：{output_follow_name}</Col>
                    <Col className="orderPerson" xs={14} md={8} lg={6}>联系方式：{output_follow_phone}</Col>
                    {
                        type == 1 ?
                            <span>
                                <Col className="orderPerson" xs={12} md={8} lg={6}>客户车牌号：{output_customer_car}</Col>
                                <Col className="orderPerson" xs={12} md={8} lg={6}>停靠位置：{output_stop_position}</Col>
                            </span>
                            : ''
                    }
                    {
                        type==2?
                            <span>
                                <Col className="orderPerson" xs={24} md={8} lg={6}>托运公司：{logistics_name}</Col>
                                <Col className="orderPerson" xs={24} md={8} lg={6}>托运电话：{logistics_phone}</Col>
                            </span>
                            : ''
                    }
                </Row>
                {
                    type == 0 ?
                        <Row style={{marginTop: '8px'}}>
                            <Col span={12} className="btnItem"
                                 onClick={() => this.handleDrop('/navigation/0', customer_x, customer_y,customer_name)}>导航</Col>
                            <Col span={12} className="btnItem"
                                 onClick={() => this.handleDetail(`/finishOrderDetail/${output_num}`)}>查看详情</Col>
                        </Row> : ''
                }
                {
                    type==2 ?
                        <Row style={{marginTop: '8px'}}>
                            <Col span={12} className="btnItem"
                                 onClick={() => this.handleDrop('/navigation/0', logistics_x, logistics_y,logistics_name)}>导航</Col>
                            <Col span={12} className="btnItem"
                                 onClick={() => this.handleDetail(`/finishOrderDetail/${output_num}`)}>查看详情</Col>
                        </Row> : ''
                }
                {
                    type == 1 ?
                        <Row style={{marginTop: '8px'}}>
                            <Col span={24} className="btnItem"
                                 onClick={() => this.handleDetail(`/finishOrderDetail/${output_num}`)}>查看详情</Col>
                        </Row> : ''
                }
            </Row>
        )
    };

    /**
     * 处理导航
     * @param path
     * @param customer_x
     * @param customer_y
     * @param customer_name
     */
    handleDrop(path, customer_x, customer_y,customer_name) {
        app.setData('customer_x', customer_x);
        app.setData('customer_y', customer_y);
        app.setData('customer_name', customer_name);
        this.props.click(path);
    };

    /**
     * 查看订单详情
     * @param path
     */
    handleDetail(path) {
        this.props.click(path);
    }
}

export default DeliveryOrder;